home *** CD-ROM | disk | FTP | other *** search
/ InterCD 2000 October / november_2000.iso / intercd / root / Html / ^Colorpad / skinning.txt < prev   
Encoding:
Text File  |  2000-07-28  |  11.9 KB  |  256 lines
  1. -=-=-= ColorPad v2.2 =-=-=-=-=-=-=-=-=-=-=-=- How To Make A Skin! -=-
  2.  
  3.      So you want to make a skin aye?!  Thanks!  I love it when
  4.  people make skins!  so be sure to send it to me when you're
  5.  done :D
  6.  
  7.  
  8.  TYPES OF SKINS
  9.  --------------
  10.  
  11.     Let's get to it.  There are two types of skins you can create:
  12.  
  13.   1) A simple skin    - The user uses the default button positions
  14.                         and changes what they look like.
  15.  
  16.   2) A freestyle skin - The user defines their own size, position,
  17.                         and graphic for the buttons, background,
  18.                         color screen and text. (cannot change font)
  19.  
  20.     Both of these can be made using whatever graphic software you
  21.   desire as long as it can load, save and edit bitmap (bmp) images.
  22.   People have even made skins using MSPaint!
  23.  
  24.  
  25.  SIMPLE SKIN CREATION
  26.  --------------------
  27.  
  28.     A simple skin, is a skin that uses the default button position
  29.   and size.  All it requires is that you make a bitmap (bmp)
  30.   graphic that is 166 pixels wide by 132 pixels tall, and that you
  31.   place the graphics for the buttons in the proper place on your
  32.   image.  That's about it in a nutshell, but let's go into details!
  33.  
  34.     First off, you should go get something that we can reffer to.
  35.   No, this isn't some huge program, it's a little skin pack! :)
  36.   It can be found here:
  37.    http://www.entic.net/~vmoya/download_software.html
  38.   Or direct:
  39.    http://www.entic.net/~vmoya/archive/software/colorpadskins.zip
  40.  
  41.     In this skin pack, are a few skins and a particular skin called 
  42.   'mask.bmp'.  This is ColorPad's default skin mask.  A 'mask' can
  43.   mean many things in the world of graphics.  In this case, it just
  44.   means "this color means this is where xxxx goes."  Here is what
  45.   each color means:
  46.  
  47.    Light green  - Where the normal menu, and color control buttons
  48.                   are located.
  49.    Dark green   - Where the 'pressed' versions of the buttons are
  50.                   located.
  51.    Light blue   - This is where the text fields will be displayed.
  52.    Dark blue    - This is where the color screen is situated.
  53.    Red          - This is the background of the skin (where users
  54.                   can right-click to get to the menu, or left-
  55.                   click and drag to move the application window.
  56.    High Purple  - Transparency Color.  This is the color used to
  57.                   crop the skin, and has a value of: #FF00FF
  58.                   (Red:255  Green:0  Blue:255.)  As you can see,
  59.                   this can be any size or shape, and can even go
  60.                   over the buttons, color screen, and text fields!
  61.    Gray         - Not used, this is actually a worthless part of the
  62.                   skin.  I might add support later to use this for
  63.                   when the window loses focus, so just keep that in
  64.                   mind... ;)
  65.    Black        - Do you see it?  Didn't think so, but it's there,
  66.                   really!  This is a single pixel, and it is located
  67.                   here-> x:83 y:0  This pixel should be the color
  68.                   you want the text to be.
  69.  
  70.     So load up this graphic in whatever graphic program you wish.
  71.   As long as it can save, load and edit bitmap (bmp) images, you'll
  72.   be fine.  Now mess arround putting happyfaces or what-not on the
  73.   graphic, and save it (as something else so you'll always have a
  74.   backup of the original mask)  If you mess up the original mask.bmp
  75.   you call always just download yourself another copy! :)
  76.  
  77.     After you've messed arround with the mask.bmp file, load it up
  78.   and see what you've done!  Welp, to tell you the truth, I'm kinda
  79.   hoping you're getting the hang of simple skinning for ColorPad...
  80.   But if you're not, just open up the other skins in the skin pack
  81.   and see what they look like, and perhaps this will help you out.
  82.   Start with something simple, with no transparency and you should
  83.   be fine.  
  84.  
  85.  
  86.  FREESTYLE SKIN CREATION
  87.  -----------------------
  88.  
  89.    Are you a renegade skinner?  Thought so :P well then this
  90.  section's for you.  Let's get down to business.  I will refer to
  91.  two files, the Skin Bmp and the Mask Bmp.  Here is what I mean by
  92.  both so that we're clear on everything.
  93.  
  94.   Skin Bmp - This is a single bmp file that has holds your actual
  95.              skin/image.  It can be called 'whatever.bmp'
  96.  
  97.   Mask Bmp - The Mask Image is a single bmp file that corresponds
  98.              ( hopefully ;) ) to your Graphic Image, and is what
  99.              ColorPad uses to figure out where all your buttons
  100.              and stuff goes.  it should be called 'whatever_mask.bmp'
  101.              the '_mask' is the important part here.
  102.  
  103.   Example: You want to name your skin 'super cool'; thus, your
  104.            Skin Bmp should be called 'super cool.bmp' and your
  105.            Mask Bmp should be called 'super cool_mask.bmp'. Yes,
  106.            I know... I'm insulting your inteligence.
  107.              
  108.  
  109.  - The Skin Bitmap:
  110.  
  111.     In general, your skin image should have what you want colorpad
  112.   to look like.  And also have, somewhere, if at all, a pushed
  113.   version of the buttons you wish your skin to have.  Be creative,
  114.   do whatever you want! :)
  115.  
  116.  - The Skin Mask:
  117.  
  118.     Ok, this is the ugly, yet beautiful part of making a freestyle
  119.   skin.  ColorPad recognizes where you want specific parts of your
  120.   skin by looking for specific colors in the skin mask.  For example
  121.   (and I'll go into detail about all the colors later) if you have a
  122.   patch of red (FF0000 or Red:255 Green:0 Blue:0), colorpad will
  123.   think this is where in the Skin Bitmap you have the graphic for
  124.   the background skin image.  Make sure all your color areas are
  125.   flat, and use exact colors.  What I mean by "flat" is that each
  126.   color patch should be just that color, no gradients or dithering!
  127.   What I mean by exact is that when you save the file, don't use the
  128.   windows palette or a web-friendly palette.  Make sure each color
  129.   retains it's exact color value, or else, you will not get the
  130.   results you were hoping for.  Common problems doing this part
  131.   wrong are:  Missing buttons/skin, weird transparent holes that are
  132.   randomly or evenly distributed throughout the skin.
  133.   
  134.  
  135.     Without further ado, here is a list of colors that are
  136.   recognized by ColorPad, and what they stand for:
  137.  
  138.  
  139.  (SECTION INFO)
  140.   rrr,ggg,bbb              Description
  141. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  142.  
  143.  (SKIN IMAGE)
  144.   255,000,000              Skin - Main graphic, not including buttons
  145.                                   the color screen, or the text
  146.                                   fields.
  147.  
  148.  (COLOR SCREEN)
  149.   000,050,050              Color screen - Displays last color when
  150.                                           getting/making another
  151.                                           color and split screen is
  152.                                           turned on.
  153.   000,100,100              Color screen - Displays whatever color
  154.                                           you have or are currently
  155.                                           getting off the screen, or
  156.                                           currently making.
  157.  
  158.  (TEXT COLOR/POSITION)
  159.   000,000,000              Default Text color - Location of the
  160.                                                 default text color.
  161.                                                 (can be overwritten
  162.                                                 by defining one or
  163.                                                 more of the below...)
  164.   000,000,020              Text color - Red decimal text color
  165.                                         (Location in the Skin Bitmap
  166.                                         that actually holds the
  167.                                         color)
  168.   000,000,040              Text color - Green decimal text color
  169.   000,000,060              Text color - Blue decimal text color
  170.   000,000,080              Text color - Red hexadecimal text color
  171.   000,000,100              Text color - Green hexadecimal text color
  172.   000,000,120              Text color - Blue hexadecimal text color
  173.   000,000,140              Text possition - Red decimal value
  174.                                             position (should be at
  175.                                             least a 17x9 region)
  176.   000,000,160              Text possition - Green decimal value
  177.                                             position (should be at
  178.                                             least a 17x9 region)
  179.   000,000,180              Text possition - Blue decimal value
  180.                                             position (should be at
  181.                                             least 17x9 region)
  182.   000,000,200              Text possition - Red hexadecimal value
  183.                                             position (should be at
  184.                                             least 16x9 region)
  185.   000,000,220              Text possition - Green hexadecimal value
  186.                                             position (should be at
  187.                                             least 16x9 region)
  188.   000,000,240              Text possition - Blue hexadecimal value
  189.                                             position (should be at
  190.                                             least 16x9 region)
  191.  
  192.  (NORMAL BUTTONS)
  193.   000,010,000              Normal button - Snap to screen
  194.   000,025,000              Normal button - Always on top
  195.   000,040,000              Normal button - Minimize
  196.   000,055,000              Normal button - Close
  197.   000,070,000              Normal button - Less red
  198.   000,085,000              Normal button - More red
  199.   000,100,000              Normal button - Less green
  200.   000,115,000              Normal button - More green
  201.   000,130,000              Normal button - Less blue
  202.   000,145,000              Normal button - More blue
  203.   000,160,000              Normal button - Less white
  204.   000,175,000              Normal button - More whire
  205.  
  206.  (PUSHED BUTTONS)
  207.   000,015,000              Pushed button - Snap to screen
  208.   000,030,000              Pushed button - Always on top
  209.   000,045,000              Pushed button - Minimize
  210.   000,060,000              Pushed button - Close
  211.   000,075,000              Pushed button - Less red
  212.   000,090,000              Pushed button - More red
  213.   000,105,000              Pushed button - Less green
  214.   000,120,000              Pushed button - More green
  215.   000,135,000              Pushed button - Less blue
  216.   000,150,000              Pushed button - More blue
  217.   000,165,000              Pushed button - Less white
  218.   000,180,000              Pushed button - More white
  219.  
  220.  
  221.  IMPORTANT: Wherever you stick the _NORMAL_ buttons/mask is where
  222.             ColorPad will think you want them on the final skin.
  223.             What I mean by this is that you will normally want the
  224.             'normal' (not pushed) buttons to be somewhere on/amongst
  225.             your main skin graphic, and not somewhere else by
  226.             themselves. (Same goes for the text and color screen.)
  227.  
  228.             Also, you do not _HAVE_ to specify all these!  If you
  229.             want a skin with just a color screen and a close button,
  230.             by all means, only specify those two things in your
  231.             graphics!! :)
  232.  
  233.     That's it!  If you're stuck, and things aren't working right,
  234.   download the colorPadv2 skin pack and see how I've done things:
  235.  
  236.   http://www.entic.net/~vmoya/archive/software/colorpadv2skins.zip
  237.   
  238.  
  239.  
  240.  BONUS
  241.  -----
  242.  
  243.     ColorPad will automatically snap to your skin's border,
  244.   Even if you use weird transparency, or have a weird, funky free-
  245.   style skin.
  246.  
  247.  
  248.  LAST COMMENTS
  249.  -------------
  250.  
  251.     I love to see what kind of skins people come up with, so don't
  252.   forget to email them to me at vmoya@entic.net (or check the
  253.   colorpad.txt for more contact info, and where to post your skins)
  254.   I know this is the second time I've said this, but I mean it! :)
  255.  
  256. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= End Document -=-